<template>
	<view class="p-2">
		<u-navbar :title="title" placeholder autoBack></u-navbar>
		
		<view v-if="dataInfo.check===0" class="bg-white flex align-center pl-2 font-30 text-main font-weight-bold" style="border-radius: 12rpx;height: 104rpx;">
			商家确认中
		</view>
		
		<view v-if="((dataInfo.check===1&&dataInfo.type===1&&dataInfo.goods_order[0].refund_status!==1)||(dataInfo.check==='1'&&dataInfo.type===2&&!$u.test.isEmpty(dataInfo.express_no)&&dataInfo.goods_order[0].refund_status!==1))" class="bg-white flex align-center pl-2 font-30 text-main font-weight-bold" style="border-radius: 12rpx;height: 104rpx;">
			退款中
		</view>
		
		<view v-if="dataInfo.check===2" class="bg-white p-2 mt-2" style="border-radius: 12rpx;">
			<view class="flex align-start mt-2">
				<view class="font-30 text-main font-weight-bold" style="width: 260rpx;">审核未通过</view>
				<view class="font-30 text-main">{{dataInfo.refusal_reason}}</view>
			</view>
			<view class="flex align-center mt-2">
				<view class="font-24 text-light6">{{dataInfo.createtime}}</view>
			</view>
		</view>
		
		<view v-if="(dataInfo.goods_order[0].refund_status===1&&dataInfo.check===1)" class="bg-white p-2 mt-2" style="border-radius: 12rpx;">
			<view class="flex align-center">
				<view class="font-30 text-main font-weight-bold">退款成功</view>
				
			</view>
			
		</view>
		
		<view v-if="dataInfo.check===1" class="bg-white p-2 mt-2" style="border-radius: 12rpx;">
			<view class="flex align-center">
				<view class="font-30 text-main font-weight-bold">退款中</view>
			</view>
		</view>
		
		<view class="bg-white flex align-center justify-between p-2 mt-2" style="border-radius: 12rpx;">
			<!-- <view class="font-30 text-main">退款金额</view>
			<commonPrice :price="dataInfo.money"></commonPrice> -->
			<view class="" v-for="item in dataInfo.goods_order" :key="item.id" style="width: 100%;">
				<orderItem :item="item" type="order" @click=""></orderItem>
			</view>
		</view>
		
		<view class="bg-white p-2 mt-2" style="border-radius: 12rpx;">
			<view class="font-30 text-main font-weight-bold">退款信息</view>
			
			<view class="flex align-center mt-2">
				<view class="font-30 text-light6">退款原因</view>
				<view class="ml-2 font-30 text-main">{{dataInfo.refund_reason|refundreason}}</view>
			</view>
			<view class="flex align-center mt-2">
				<view class="font-30 text-light6">退款金额</view>
				<view class="ml-2 font-30 text-main">￥{{dataInfo.money}}</view>
			</view>
			<view class="flex align-center mt-2">
				<view class="font-30 text-light6">申请时间</view>
				<view class="ml-2 font-30 text-main">{{dataInfo.createtime}}</view>
			</view>
			<view class="flex align-center mt-2">
				<view class="font-30 text-light6">退款编号</view>
				<view class="ml-2 font-30 text-main">{{dataInfo.order_sn}}</view>
			</view>
			<view class="flex align-start mt-2">
				<view class="font-30 text-light6" style="width: 170rpx;">退款说明</view>
				<view class="ml-2 font-30 text-main">{{dataInfo.reason}}</view>
			</view>
			
			<view class="mt-2 flex align-center">
				<view style="margin-right: 100rpx;" v-for="(item,index) in dataInfo.images" :key="index">
					<u-image :src="item" width="176rpx" height="176rpx" radius="20rpx"></u-image>
				</view>
			</view>
			
		</view>
		
		<view class="" style="height: 100rpx;"></view>
		<view v-if="dataInfo.check===2" class="flex align-center justify-end fixed-bottom bg-white pr-3" style="height: 100rpx;">
			<view class="flex align-center justify-center after"  @click.stop="afterClick">重新申请</view>	
		</view>
		
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default{
		data(){
			return{
				orderId:'',
				ordergoodsId:'',
				dataInfo:{},
				expressCompany:'',
				expressNo:'',
				title: ''
			}
		},
		filters:{
		   refundreason(value){
			   if(value === 1){
				   return '不喜欢'
			   }
			   if(value === 2){
			   		 return '选错规格，重新拍'	   
			   }
			   if(value === 3){
			   		 return '其他原因不想要了'		   
			   }
			   if(value === 4){
			   		 return '忘记使用优惠卷'		   
			   }
			   if(value === 5){
			   		 return '其他'	   
			   }
		   }	
		},
		onLoad(e) {
			this.orderId = e.orderId
			this.ordergoodsId = e.ordergoodsId
			this.title = e.title
			this.Detail()
		},
		methods:{
			...mapMutations(['getDetail']),
			Detail(){
				this.$api.serverdetail({
					order_id:this.orderId,
					order_goods_id:this.ordergoodsId
				}).then(res=>{
					if(res.code === 1){
						this.dataInfo = res.data
					}
				})
			},
			afterClick(){
				this.getDetail(this.dataInfo)
				uni.$u.route({
					url:'pages/user/aftersale/refund',
					type:'redirectTo',
					params:{
						type:this.dataInfo.type,
						status:'edit'
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.after{
		width: 220rpx;
		height: 56rpx;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		opacity: 1;
		border: 2rpx solid #04BF79;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #04BF79;
	}
</style>